<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getWorkerCollectApi">
      <template #avator="scope">
        <div class="left-box">
          <img :src="getAvatorUrl(scope.row.avator)" alt="用户头像" />
        </div>
      </template>
      <template #name="scope">
        <div class="work-info-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="info-item">
            <span class="info-info info-b">{{ scope.row.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-info info-s">{{ filterEnum(scope.row.gender, genderType) }} </span>|
            <span class="info-info info-s">{{ getAge(scope.row.birthDay) }}&nbsp;岁</span>|
            <span class="info-info info-s">{{ scope.row.eduContent }} </span>|
            <span class="info-info info-s">{{ scope.row.workYearContent }}</span>
          </div>
        </div>
      </template>
      <template #expJob="scope">
        <div class="exp-job-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="info-item">
            <span class="info-b">{{ scope.row.expCity }}</span>
          </div>
          <div class="info-item">
            <el-tag v-for="(tag, idx) in getTags(scope.row.expJobTypeNames)" :key="idx">
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #workContent="scope">
        <div class="work-tag-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="tag-bar">
            <el-tag v-for="(tag, idx) in getTags(scope.row.stags)" :key="idx">
              {{ tag }}
            </el-tag>
          </div>
          <div class="tag-bar">
            <el-tag v-for="(tag, idx) in getTags(scope.row.ftags)" :key="idx">
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #expSalary="scope">
        <dis class="expsalary-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <span>{{ scope.row.expSalaryStart }}&nbsp;-&nbsp;</span>
          <span>{{ scope.row.expSalaryEnd }}&nbsp;元&nbsp;</span>
        </dis>
      </template>
      <template #lastLoginDate="scope">
        {{ dateStr(scope.row.lastLoginDate) }}
      </template>
      <template #operation="scope">
        <el-button
          :type="scope.row.flagSee == 'Y' ? 'success' : 'danger'"
          :icon="Download"
          @click="handleSaveWorker(scope.row.workerId)"
        >
          {{ scope.row.flagSee == "Y" ? "已下载" : "下载工友" }}
        </el-button>
        <el-button type="primary" :icon="ChatDotRound" @click="handleCommunicate(scope.row)"> 直接沟通 </el-button>
      </template>
    </ProTable>
    <WorkerDialog ref="dialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getWorkerCollectApi } from "@/api/modules/cpyswk/wk";
import { computed, reactive, ref } from "vue";
import defaultAvatar from "@/assets/images/davator.png";
import { OptEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { genderType } from "@/biz/datas/sysData";
import { getAge, dateStr } from "@/utils";
import WorkerDialog from "../components/WorkerDialog.vue";
import { Download, ChatDotRound } from "@element-plus/icons-vue";
import { getWorkerApi } from "@/api/modules/cpyswk/pol";
import { ElMessage } from "element-plus";
import { getUserDetails } from "@/api/modules/user";
import router from "@/routers";

const pTable = ref();
const initParam = reactive({});


// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  // { type: "index", label: "#", width: 60 },
  {
    prop: "avator",
    label: "头像",
    width: 80
  },
  {
    prop: "name",
    label: "工友信息"
  },
  {
    prop: "expJob",
    label: "期望岗位"
  },
  {
    prop: "workContent",
    label: "工友标签"
  },
  {
    prop: "expSalary",
    label: "期望薪资",
    width: 120
  },
  {
    prop: "collectDate",
    label: "收藏时间",
    width: 110
  },
  {
    prop: "lastLoginDate",
    label: "最近登录",
    width: 100
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

const getTags = computed(() => {
  return (tagsStr: string): string[] => {
    let tags: string[] = [];
    if (tagsStr && tagsStr.length) {
      tags = tagsStr.split(",");
    }
    return tags;
  };
});

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

// 下载简历
const handleSaveWorker = async (workerId: string) => {
  if (workerId) {
    let res = await getWorkerApi({ id: workerId });
    if (res.data) {
      ElMessage.success({
        message: `工友保存成功！`
      });
    }
  }
};

const handleCommunicate = (row) => {
  router.push({
    path:'/im/index',
    query:{
      userId:row.userId
    }
  })
};
</script>

<style scoped lang="scss">
.left-box {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    height: 60px;
    width: 60px;
  }
}

.work-info-wrapper {
  // border: 1px solid red;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;

  flex-direction: column;
}

.info-item {
  display: flex;
  font-size: 0.8em;
  font-weight: 600;
  overflow: hidden;
  & .el-tag {
    margin-right: 0.5rem;
  }

  .info-b {
    font-weight: 600;
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 5px;
  }

  .info-s {
    font-size: 0.8rem;
    color: var(--el-color-info);
  }

  .info-info {
    margin: 0 5px;
  }
}

.work-tag-wrapper {
  // border: 1px solid red;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;

  .tag-bar {
    width: 100%;
    margin-bottom: 5px;
    // border: 1px solid red;
    display: flex;
    & .el-tag {
      margin-right: 0.5rem;
    }
  }
}

.exp-job-wrapper {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  // border: 1px solid red;
}
.expsalary-wrapper {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
